<template>
  <ElAside class="blog-slider" width="auto">
    <div class="blog-slider--wrap">
      <!-- 头像 -->
        <ElAvatar :size="100" class="blog-avatar--pic" :src="userInfo?.avatar" />
      <!-- 信息 -->
      <div class="blog-info">
        <!-- 昵称 -->
        <h2 class="blog-info--nickname">{{ userInfo?.nickName }}</h2>
        <div class="blog-info--state">
          <div class="blog-state--item blog-line--col">
            <a href="#">
              <p class="blog-state--count">{{ userInfo?.articleCount }}</p>
              <p class="blog-state--name">文章</p>
            </a>
          </div>
          <div class="blog-state--item">
            <a href="#">
              <p class="blog-state--count">{{ userInfo?.columnCount }}</p>
              <p class="blog-state--name">分类</p>
            </a>
          </div>
        </div>
        <!-- 介绍内容 -->
        <div class="blog-info--content">{{ userInfo?.signalName }}</div>
      </div>
    </div>
  </ElAside>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { useUser } from '@/store/user'
let user = useUser()
let userInfo = computed(() => {
  return user?.userInfo
})
</script>
<style lang="less" scoped>
@import url('@/assets/css/variable.less');

.blog-middle {
  padding-top: @padding-space * 3;
}

.blog-slider--wrap {
  position: fixed;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 240px;
  padding: @padding-space * 2;
  text-align: center;
  background-color: @bg-theme-color;
  border-radius: @radius-size;
}



.blog-info {
  padding: @padding-space * 2 0;
}

.blog-info--nickname {
  padding-bottom: @padding-space;
  margin: 0;
  font-size: @font-size-h * 2;
  color: @font-theme-color;
}

.blog-info--state {
  display: flex;
  justify-content: center;
  padding: 0 @padding-space;
}

.blog-state--item {
  padding: 0 @padding-space;
}

.blog-state--count {
  font-size: 14px;
  font-weight: 700;
  color: @font-theme-color;
}

.blog-state--name {
  font-size: @font-size-p;
  color: @font-modifier-color;
}

.blog-info--content {
  padding: @padding-space;
  font-size: @font-size-p;
  color: @font-theme-color;
  text-align: left;
  text-indent: 2em;
}
</style>
